템플릿에 새로운 태그를 만들어 사용, 복잡한 코드를 알아보기 쉽게 하거나, 하나의 컴포넌트를 여러 곳에 만들어서 사용할 수 있음. 자식 컴포넌트의 selector를 부모 컴포넌트에 사용하면 됌.

  • child-component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component } from '@angular/core';

@Component({
selector: 'child-component',
template: '<h2 (click)="onClick()">자식 컴포넌트 {{ no }}</h2>',
})

export class ChildComponent {
no: number = 0;
onClick() {
this.no++;
}
}
  • app.module.ts
1
2
3
4
5
6
7
8
...
import { ChildComponent } from '../components/child-component';
...
@NgModule({
declarations: [
...
ChildComponent
...

만들어준 컴포넌트를 declarations에 추가한다.

자식 컴포넌트는 entryComponent에 추가해줄 필요가 없다.

  • 페이지.ts
1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
import { ChildComponent } from '../components/child-component';

@Component({
template: `
<h2>이곳은 부모</h2>
<child-component></child-component>
`
})
export class ParentComponent {
}

Reference

https://www.youtube.com/watch?v=mB5eYtFwJR4&index=25&list=PLAiXlfcSCXYTA8k8AQX0sdRtvpOGkY7yq